<template>
  <view class="indexs">
    <view class="header header_wi" :style="'padding-top: ' + navH + 'px;'">
      <view
        class="header_height"
        :style="
          'height:' +
          gaodu +
          'px;line-height:' +
          gaodu +
          'px;top:' +
          gaodutops +
          'px;'
        "
      >
        <view class="index_h_cont3">
          <view class="index_wenben_img" @tap="jumpzuo"
            ><image :src="imgUrl + '/dzx_img33.png'" mode="widthFix"></image
          ></view>
          <view class="index_wenben">{{
            $t("page_my_uservip.VIP会员")
          }}</view>
        </view>
      </view>
      <view class="coloe_title">s</view>
    </view>
    <view
      class="index_center"
      :style="'padding-top:' + (navH + 50) + 'px;padding-bottom:130rpx;'"
    >
      <view class="my_chongzhi_center">
        <view class="my_chongzhi_item1">
          <image :src="imgUrl + '/dzx_img127.png'"></image>
          <view class="my_chongzhi_item1_txt">
            <view class="my_chongzhi_item1_t1"
              >{{ $t("page_my_uservip.我的等级") }}</view
            >
            <view class="my_chongzhi_item1_t2">{{
              userInfo.grade.name
            }}</view>
          </view>
        </view>
        <view class="my_chongzhi_item2">
          <view class="my_chongzhi_item2_title">
            <image :src="imgUrl + '/dzx_img47.png'"></image>
            <text>{{ $t("page_my_uservip.VIP等级") }}</text>
          </view>
          <view class="my_chongzhi_item2_input plan">
            <view
              :class="'planname' + ' ' + (gradeindex == index ? 'planbg' : '')"
              :data-id="item.grade_id"
              :data-index="index"
              @tap="planname"
              v-for="(item, index) in viplist"
              :key="item.grade_id"
            >
              {{ item.name }}
            </view>
          </view>
        </view>
       
        <view class="my_chongzhi_item3">
          <view class="my_chongzhi_item2_title">
            <image :src="imgUrl + '/dzx_img47.png'"></image>
            <text>{{ $t("page_my_chongzhi.payment_method") }}</text>
          </view>
          <view class="my_chongzhi_item3_list">
            <block v-for="(item, index) in payTypes" :key="index">
              <view
                class="my_chongzhi_item3_cont"
                :data-type="item.value"
                @tap="paytypeChange"
              >
                <view class="my_chongzhi_item3_cont_l">
                  <image :src="item.icon"></image>
                  <text>{{ item.name }}</text>
                </view>
                <view
                  class="my_chongzhi_item3_cont_r"
                  v-if="paytype == item.value"
                >
                  <image :src="imgUrl + '/dzx_img131.png'" />
                </view>
                <view class="my_chongzhi_item3_cont_r" v-else>
                  <image :src="imgUrl + '/dzx_img132.png'" />
                </view>
              </view>
            </block>
          </view>
        </view>
		<view class="my_dingdan_details_item3" v-if="paytype==60">
		  <view class="my_dingdan_details_item2_title">
		    <image :src="imgUrl + '/dzx_img47.png'"></image>
		    <text>{{ $t("page_my_dingdan_details.xianxiazhifu") }}</text>
		  </view>
		  <view class="my_dingdan_details_item2_list">
		    <view class="index_center">
		        <view class="my_pinzhenglist_center">
		            <view class="index_swiper">
		                <!--Tab布局-->
		                <view class="index_title">
		                    <block v-for="(item, index) in malllist" :key="index">
		                        <view :data-id="item.id" :class="'mall_dis ' + (currentIndex == index ? 'mall_on' : '')" @tap="getcurrentid">
		                            <view class="mall_t1">{{ item.name }}</view>
		                        </view>
		                    </block>
		                </view>
		                <!--内容布局-->
		                <view class="index_list" v-if="currentIndex==0">
		                    <swiper class="swiper paid_list_cont" 
									:indicator-dots="indicatorDots"
									:vertical="vertical"
									:autoplay="autoplay"
									:duration="duration"
									:interval="interval"
									:indicator-color="color"
									:indicator-active-color="colors"
									:circular="circular">
		                        <block>
		                            <swiper-item v-if="viplist.length !=0" v-for="(item, index) in viplist">
										<view class="my_yhq_list" >
											<view class="my_yhq_cont my_huikuan_item2_cont">
												<view class="my_huikuan_item2_cont_l">
													<view class="my_huikuan_item2_t1" v-if="item.bank_name">
														{{ $t('page_my_huikuan.bank_name') }}：{{ item['bank_name'] }}
													</view>
													<view class="my_huikuan_item2_t1" v-if="item.bank_card">
														{{ $t('page_my_huikuan.account') }}：{{ item['bank_card'] }}
													</view>
													<view class="my_huikuan_item2_t1" v-if="item.open_name">
														{{ $t('page_my_huikuan.account_holder') }}：{{ item['open_name'] }}
													</view>
													<view class="my_huikuan_item2_t1" v-if="item.child_bank_name">
														{{ $t('page_my_huikuan.account_opening_branch') }}：{{ item['child_bank_name'] }}
													</view>
												</view>
												<view
													class="my_huikuan_item2_cont_r"
													:data-card="$t('page_my_huikuan.bank_name') + item['bank_name'] +
															'，' + $t('page_my_huikuan.account') +
															'：' + item['bank_card'] +
															'，' + $t('page_my_huikuan.account_holder') +
															'：' + item['open_name'] +
															'，' + $t('page_my_huikuan.account_opening_branch') +
															'：' + item['child_bank_name']
													"
													@tap="bindCopy"
												>
													{{ $t('page_my_huikuan.one_click_copy') }}
												</view>
											</view>
										</view>
		                            </swiper-item>
		                        </block>
		                    </swiper>
		                </view>
						
						<view class="index_list" v-if="currentIndex==1">
						    <swiper class="swiper paid_list_cont" 
									:indicator-dots="indicatorDots"
									:vertical="vertical"
									:autoplay="autoplay"
									:duration="duration"
									:interval="interval"
									:indicator-color="color"
									:indicator-active-color="colors"
									:circular="circular">
						        <block>
						            <swiper-item v-if="bankimagelist.length !=0" v-for="(item, index) in bankimagelist">
										<view class="my_yhq_list" >
											<view class="my_yhq_cont my_huikuan_item2_cont">
												<view class="my_huikuan_item2_cont_l">
													<view class="my_huikuan_item2_t1 bankimage" :data-url="item" @click="previewImagebank">
														<image :src="item.image?item.image.file_path:''"></image>
													</view>
												</view>
											</view>
										</view>
						            </swiper-item>
						        </block>
						    </swiper>
						</view>
		            </view>
					<view class="cangkuyuan_saomaruku_item1_cont2" style="border-bottom: none">
					    <view class="cangkuyuan_saomaruku_item1_cont_l">
					        <image :src="imgUrl+'/dzx_img192.png'"></image>
					        <text>{{ $t("page_my_uservip.上传支付凭证") }}</text>
					    </view>
					    <view class="cangkuyuan_saomaruku_item2_r5" >						
					        <view  :data-id="item" :data-index="index" @click="deleteimg" v-for="(item,index) in imageSrc" :key="index" class="cangkuyuan_saomaruku_item2_r5_img" >
								<image :src="item"></image>
					        </view>
					
							<view class="cangkuyuan_saomaruku_item2_r5_img" @click="toSelectImage()">
								<image :src="imgUrl+'/dzx_img193.png'"></image>
							</view>
					    </view>
					</view>
		        </view>
		    </view>
		  </view>
		</view>

        <view class="my_chongzhi_item4">
          <view class="my_chongzhi_item2_title">
            <image :src="imgUrl + '/dzx_img47.png'"></image>
            <text>{{ $t("page_my_uservip.等级说明") }}</text>
          </view>
          <view class="my_chongzhi_item4_txt">
            <view class="my_huikuan_item1_cont">
				<mp-html :content="article_content" />
				</view>
          </view>
        </view>
      </view>

      <view class="baoguo_btns" v-if="gradesetting.is_open==1">
        <view class="baoguo_btns_posi">
          <view v-if="paytype!=60" class="baoguo_btn" @tap="querenchongzhi">{{$t("page_my_uservip.确认购买")}}</view>
		  <view v-if="paytype==60" class="baoguo_btn" @tap="postSubmit">{{$t("page_my_uservip.确认购买")}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// pages/shouye/shouye_zkc/shouye_zkc.js
const app = getApp();
let request = require("../../../utils/require");
import { PAYMENTSCENARIO } from "@/utils/enum/order/PayType";

export default {
  data() {
    return {
      navH: app.globalData.navHeight,
      gaodu: app.globalData.height,
      gaodutops: app.globalData.top,
      imgUrl: app.globalData.imgUrl,
      gradeId: 0,
	  gradeindex:0,
	  article_content:"",
      optionsid: "",
      rechargelist: "",
      rtype: 1,
      paysetting: uni.getStorageSync("paytype"),
	  userInfo: uni.getStorageSync("userInfo"),
      price_mode: uni.getStorageSync("price_mode"),
	  gradesetting:"",
	  viplist: [],
	  bankimagelist: [],
	  imageSrc:[],
	  imageIds:[],
	  currentIndex: uni.getStorageSync("currentIndex")?uni.getStorageSync("currentIndex"):0,
	  //轮播图
	  circular: true, 
	  //是否显示画板指示点
	  indicatorDots: false,
	  //选中点的颜色
	  colors: '#5D59EC',
	  //未选中点的颜色
	  color: '#fff',
	  //是否竖直
	  vertical: false,
	  //是否自动切换
	  autoplay: true, 
	  //自动切换的间隔
	  interval: 5000,
	  //滑动动画时长毫秒
	  duration: 1000,
	  malllist: [
	      {
	          id: 0,
	          name: this.$t('page_other.银行转账')
	      },
	      {
	          id: 1,
	          name:  this.$t('page_other.收款码')
	      },
	      // {
	      //     id: 2,
	      //     name: '淘宝店铺'
	      // }
	  ],
    };
  },
  /**
   * 生命周期函数--监听页面加载
   */ 
  onLoad(options) {
    var that = this;
    that.optionsid= options.yue
	this.getBalancePaySetting();
  },
  onShow() {
	var that = this;
	this.getGradeList();
	this.getBankImageList();
	this.setting();
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
	  //设置
	  setting() {
	  	var that = this;
	  	var data = {
	  		token: uni.getStorageSync('token')
	  	};
	  	request.post(`index.php?s=/api/page/service&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
	  		if (res.data.code == 1) {
				that.gradesetting = res.data.data.grade;
	  		} else {
	  			uni.showToast({
	  				title: res.data.msg,
	  				icon: 'none'
	  			});
	  		}
	  	});
	  },
	  getGradeList() {
	  	var that = this;
	  	var url = 'index.php?s=/api/grade/list';
	  	var data = {};
	  	request.post(url + `&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
	  		if (res.data.code == 1) {
	  			that.viplist = res.data.data.list
				var article_content = res.data.data.list[that.gradeindex].desc
				that.article_content = that.removeHtmlTags(article_content)
	  		}
	  	});
	  },
	  // 工具函数：去除 HTML 标签
	   removeHtmlTags(html) {
	    return html
	  	// .replace(/<[^>]+>/g, '')      // 移除标签
	  	.replace(/&nbsp;/g, ' ')      // 替换空格实体
		.replace(/<\/p>/gi, '\n')
	  	.replace(/\s+/g, ' ')         // 合并连续空格
	  	.trim();
	  },
	  getBankImageList() {
	  	var that = this;
	  	var url = 'index.php?s=/api/page/bankCardImageList';
	  	var data = {};
	  	request.post(url + `&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
	  		if (res.data.code == 1) {
	  			if (that.page > res.data.data.last_page) {
	  				that.ispage = false
	  			} else {
	  				that.bankimagelist = that.bankimagelist.concat(res.data.data.data.data)
	  			}
	  		}
	  	});
	  },
	  //swiper单击事件
	  getcurrentid(e) {
	  	this.currentIndex= e.currentTarget.dataset.id
	  	uni.setStorageSync("currentIndex",this.currentIndex);
	  },
	  deleteimg(e){
			console.log(e,99000);
			var that = this;
			var imglist = that.imageSrc;
			var index = e.currentTarget.dataset.index;
			//splice会改变原数组
			var imageIdlist = that.imageIds;
			console.log(imgid,99001);
			imglist.splice(index, 1)
			imageIdlist.splice(index, 1)
			this.imageIds = imageIdlist
			console.log(this.imageIds,999)
	  },
	  toSelectImage(){
	  	var that = this;
	  	uni.chooseImage({
	  			count: 1, // 最多可以选择的图片张数，默认9
	  			sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
	  			sourceType: ['album', 'camera'], 
	  			success: function(res) {
	  				//判断图片格式
	  				uni.showLoading({
	  					title:'上传中...'
	  				})
	  				console.log(res)
	  				for(var i=0;i<res.tempFiles.length;i++){
	  					if(res.tempFiles[0]['size']>2*1024*1024){
	  						uni.showToast({
	  							title: '图片大小不能超过2M',
	  							icon: 'none',
	  							duration: 3000
	  						});
	  						return;
	  					}
	  						if(that.imageSrc.length>=1){
	  							uni.showToast({
	  								title: '只能上传一张凭证',
	  								icon: 'none',
	  								duration: 3000
	  							});
	  							return;
	  						}
	  					that.uploadImgFile(res.tempFiles[0])
	  				}	
	  			}
	  		});
	  },
	  uploadImgFile(filePath){
	  	 var that = this;
	  	 console.log(filePath,77)
	  	 uni.uploadFile({
	  			url:app.globalData['url']+"/index.php?s=/api/upload/image&wxapp_id="+ uni.getStorageSync('web_id')+"&token="+uni.getStorageSync('token'),
	  			filePath: filePath.path,
	  			name: 'iFile',
	  			success: response => {
	  				let res = JSON.parse(response.data);
	  				uni.hideLoading();
	  				console.log(res,987654)
	  				if (res.code == 1) {
	  					that.imageSrc.push(res.data.file_path);
	  					that.imageIds.push(res.data.file_id);
	  				}
	  				console.log(that.imageIds, '--666--res');
	  			},
	  			fail: err => {
	  				uni.hideLoading()
	  			}
	  	    });
	  },
    planname(e) {
      var that = this;
	  that.gradeId= e.currentTarget.dataset.id
	  that.gradeindex = e.currentTarget.dataset.index
	  var article_content = that.viplist[that.gradeindex].desc
	  that.article_content =  that.removeHtmlTags(article_content)
	  console.log(that.article_content,9999)
    },
	postSubmit() {
		var that = this;
		var data = {
			token: uni.getStorageSync('token'),
			amount: this.amount,
			coin_type: this.coinIndex,
			dates: this.datetime,
			imageIds: this.imageIds
		};
		var url = 'index.php?s=/api/user/certificate';
		request.post(url + `&wxapp_id=` + uni.getStorageSync('web_id'), data).then(function(res) {
			if (res.data.code == 1) {
				console.log(res, 'add');
				uni.showToast({
					title: res.data.data
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 0
					});
				}, 1000);
			} else {
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				});
			}
		});
	},
    querenchongzhi() {
        var data = {
          gradeId: this.gradeId,
          customMoney: this.chongzhi,
          token: uni.getStorageSync("token"),
          paytype: this.paytype,
        };
        this.pay(data, PAYMENTSCENARIO.GRADE)
          .then(() => {
            setTimeout((res) => {
              uni.showToast({
                title: "购买成功",
              });
              uni.navigateTo({
                url: "/pages/my/my",
              });
            }, 1000);
          })
          .catch((err) => {
            console.error(err);
          });
    },

    jumpzuo() {
      uni.navigateBack();
    },
	bindCopy(e) {
		var card = e.currentTarget.dataset.card;
		uni.setClipboardData({
			data: card,
			success: function(res) {
				uni.getClipboardData({
					success: function(res) {
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			}
		});
	},
    chongzhiFun(e) {
      this.chongzhi= e.detail.value
      this.planId= ""
	  this.amount = e.detail.value;
      console.log(this.chongzhi, 666);
    },
	previewImagebank(e) {
	  var artimages = e.currentTarget.dataset.url.image.file_path
	  uni.previewImage({
	    current: 0,
	    urls: [artimages],
	  });
	},
  },
};
</script>
<style>
@import "./userVip.css";
</style>
